<template>
  <div class="page-style">
    <el-col :span="14" :offset="5">
      <el-form ref="productInfo" :model="form">
        <el-form-item label="默认名称" label-width="200">
          <el-input v-model="form.company_name" />
        </el-form-item>
        <el-form-item label="默认客服电话" label-width="200">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="默认官网" label-width="200">
          <el-input v-model="form.href_url" />
        </el-form-item>
        <el-form-item label="默认展示图" label-width="200">
          <el-upload
            :action="uploadUrl + '/oss_upload'"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :file-list="form.text"
            :on-remove="handleBannerRemove"
            :on-success="handleBannerSuccess"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <span style="font-size:12px; color: #ccc">建议尺寸为 750 * 500</span>
        </el-form-item>
        <el-form-item label="默认LOGO" label-width="200">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl + '/oss_upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.logo" :src="form.logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="默认广告图" label-width="200">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl + '/oss_upload'"
            :show-file-list="false"
            :on-success="handleAdSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.advertisement_img" :src="form.advertisement_img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="广告跳转路径" label-width="200">
          <el-input v-model="form.advertisement_href" />
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form-item></el-form>
    </el-col>

  </div>
</template>

<script>
import { operationDefaultBanner, getDefaultBanner } from '@/api/foregrounding'
import { deletePicture } from '@/api/main'
import { disposeFile } from '@/utils/index'
export default {
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API,
      form: {
        company_name: '',
        text: [],
        logo: '',
        phone: '',
        href_url: '',
        advertisement_img: '',
        advertisement_href: ''
      },
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  created() {
    this.getBannerPicture()
  },
  methods: {
    handleBannerRemove(file, fileList) {
      this.form.text = disposeFile(fileList)
      let name = file.response.split('/')
      name = name[name.length - 1]
      // console.log(name)
      const data = {
        object: name
      }
      deletePicture(data).then(res => {
        // console.log(res)
        if (res.code === 200) {
          console.log('图片已删除')
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 商品展示图上传成功
    handleBannerSuccess(res, file, fileList) {
      const newFileList = disposeFile(fileList)
      this.form.text = newFileList
    },
    handleAvatarSuccess(res, file) {
      this.form.logo = res
    },
    handleAdSuccess(res, file) {
      this.form.advertisement_img = res
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type.split('/')[0] === 'image'

      if (!isJPG) {
        this.$message.error('上传只能为图片格式!')
      }
      return isJPG
    },
    getBannerPicture() {
      getDefaultBanner().then(res => {
        if (res.text.lengt !== 0) {
          this.form = res
        }
      })
    },
    operationDefaultBannerFun() {
      const data = {
        pro: this.form
      }
      // console.log(data)
      operationDefaultBanner(data).then(res => {
        if (res.code === 200) {
          this.$message.success('信息提交成功！')
        }
      })
    },
    submit() {
      this.operationDefaultBannerFun()
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px dotted #d9d9d9;
    border-radius: 6px;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }

</style>
